<template>
	<view>
		<view class="switich-container">
			<view class="" v-for="(item,index) in switichList">
				<view class="switich-content">
					<view class="avatar" @click="switchStudent(item)"><img :src="item.image" alt=""
							style=" border-radius: 50%; width: 100%; height: 100%;"></view>
					<view class="name">{{item.name}}</view>
					<view class="unbind" @click="unbindBtn(item)">解绑</view>
					<view class="share-bind" @click="shareBtn(item.id,item.name)">分享亲友绑定</view>
				</view>

			</view>
		</view>
		<view class="bind-new" @click="studentBind">
			<view class="bing-img">
				<img src="@/static/my/bangding.png" alt="" style="width: 100%;height: 100%;" />
			</view>绑定新成员
		</view>
		<view class="" style="height: 150rpx;">

		</view>
		<u-modal v-model="orderModalShow" :show-title="false" :show-cancel-button="true" @confirm="orderSubmit">
			<view class="slot-content">
				确定解绑吗？
			</view>
		</u-modal>
		<sharePage :additionVotesShow="additionVotesShow" @additionVotesShowBtn="additionVotesShowBtn"></sharePage>
	</view>
</template>

<script>
	import {
		findByBindTraineeList,
		unBindAction,
		toggleTrainee
	} from '@/utils/api.js'
	import {
		baseUrl
	} from '@/utils/config.js'
	import sharePage from '@/components/sharePage.vue';
	import {
		wxCreate
	} from '@/utils/readWx.js'
	export default {
		components: {
			sharePage
		},
		data() {
			return {
				switichList: [],
				orderModalShow: false,
				traineeId: '',
				additionVotesShow: false
			}
		},
		async onLoad() {
			this.findByBindTraineeList()
			this.wx = await wxCreate(uni.getStorageSync('appId'))
		},
		methods: {
			async findByBindTraineeList() {
				uni.showLoading()
				const {
					code,
					data
				} = await findByBindTraineeList()
				if (code == 200) {
					uni.hideLoading()
					this.switichList = data
				}

			},
			switchStudent({
				id
			}) {
				if (id === uni.getStorageSync('trainneInfo').id) {
					uni.showToast({
						icon: 'none',
						title: '已是当前学员'
					})
					return
				}
				uni.showModal({
					title: '是否要切换此学员',
					success: async ({
						confirm
					}) => {
						if (confirm) {
							try{
							uni.showLoading()
							const {
								data
							} = (await toggleTrainee( id))
								uni.setStorageSync('token',data.token)
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}finally{
								uni.hideLoading()
							}
	
						}

					}
				})

			},
			unbindBtn(item) {
				this.orderModalShow = true
				this.traineeId = item.id

			},
			async orderSubmit() {
				uni.showLoading()
				const data = {
					traineeId: this.traineeId
				}
				const {
					code
				} = await unBindAction(data)
				if (code === 200) {
					uni.showToast({
						title: `解绑成功~`,
						icon: 'none',
						duration: 2000
					});
					this.findByBindTraineeList()
				}
			},
			shareBtn(id, name) {
				this.wx.ready(() => { //需在用户可能点击分享按钮前就先调用
					this.wx.updateAppMessageShareData({
						title: '绑定' + name, // 分享标题
						desc: '绑定' + name + '学员',
						link: `${baseUrl}/#/pages/autoBindStudent/autoBindStudent?id=${id}&appId=${uni.getStorageSync('appId')}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: 'https://h5.mixue18.com/logo.jpeg', // 分享图标
						success: () => {
							this.additionVotesShow = true
						},

					})
				})

			},
			additionVotesShowBtn(res) {
				this.additionVotesShow = res
			},
			studentBind() {
				uni.navigateTo({
					url: '/pages/my/studentBinding'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style>
	.switich-container {}

	.switich-content {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		margin-top: 30rpx;
		margin-left: 30rpx;
		padding-bottom: 30rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.name {
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-weight: bold;
		width: 120rpx;
	}

	.unbind {
		width: 120rpx;
		height: 55rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 50rpx;
		border: 2rpx solid #aaaaaa;
		color: #aaaaaa;
		margin-top: 30rpx;
		margin-left: 100rpx;
	}

	.share-bind {
		width: 200rpx;
		height: 55rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 50rpx;
		color: #ffffff;
		background-color: #076aff;
		margin-top: 30rpx;
		margin-left: 40rpx;
	}

	.bind-new {
		width: 100%;
		height: 120rpx;
		background-color: #076aff;
		color: #ffffff;
		font-size: 38rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bing-img {
		width: 50rpx;
		height: 50rpx;
	}

	.slot-content {
		text-align: center;
		margin: 60rpx 0;
	}
</style>